<template>
	<view class="app-shop-product">
		<view class="app-mch dir-left-nowrap main-left cross-center">
			<view class="app-all-radio cross-center" @click="changeAllRadio(mch)"
				v-if="mch.new_status === 0 || editStatus">
				<view class="app-all" v-if="!mch.is_active"></view>
				<view class="app-all-active" v-else :class="theme+ '-m-back ' + theme"></view>
			</view>
			<view v-else class="app-all-radio cross-center">
				<view class="app-all app-all-n"></view>
			</view>
			<div class="t-omit app-mch-name" @click="navigateMch(mch)">{{mch.name}}</div>
		</view>
		<view class="app-product dir-left-nowrap cross-top" v-for="(good, index) in mch.goods_list" :key="index">
			<view class="app-single-radio dir-left-nowrap main-center cross-center">
				<view
					v-if="(good.new_status === 2 || good.new_status === 3 || good.new_status === 4 || good.new_status === 5) && !editStatus"
					class="app-invalid">
					<!-- || (good.miaosha_status && good.miaosha_status == 0) -->失效
				</view>
				<view v-else-if="good.new_status === 6 && !editStatus"
					class="app-radio dir-top-nowrap main-center cross-center">
					<view class="disabled-radio"></view>
				</view>
				<view class="app-radio dir-top-nowrap main-center cross-center" v-else
					@click="changeSingleRadio(mch, good)">
					<view class="radio-single" v-if="!good.is_active"></view>
					<view class="radio-single-active" v-else :class="theme+ '-m-back ' + theme"></view>
				</view>
			</view>
			<view class="app-image" @click="jump(good)">
				<image :src="good.attrs.pic_url ? good.attrs.pic_url : good.goods.cover_pic"></image>
			</view>
			<view class="app-content" @click="jump(good)">
				<text class="app-title" :class="{'app-failed-title': good.new_status !== 0}">
					{{good.goods.name}}
				</text>
				<view class="app-specification-style">
					<text v-for="(item, index) in good.attrs.attr" v-bind:key="index">
						{{item.attr_group_name}}: {{item.attr_name}}
					</text>
				</view>
				<!-- <app-attr :goods="good.goods" :attrGroupList="goods.attr_groups" :theme="getTheme"
					:show="attrShow"></app-attr> -->

				<view class="app-miaosha dir-left-nowrap main-left cross-center" v-if="good.sign === 'miaosha'">
					<icon class="app-miaosha-icon" v-if="good.miaosha_status === 2 || good.miaosha_status === 1"></icon>
					<icon class="app-spike-icon" v-if="good.miaosha_status === 0"></icon>
					<view class="app-beginning" v-if="good.miaosha_status === 1">
						秒杀中 还剩
						{{good.miaosha_string}}
						结束
					</view>
					<text class="app-over" v-if="good.miaosha_status === 0">秒杀已结束</text>
				</view>

				<view class="app-miaosha dir-left-nowrap main-left cross-center" v-if="good.sign === 'flash_sale'">
					<icon class="app-flash-sale-icon" :class="theme + '-m-back ' + theme"
						v-if="good.flash_sale_status === 1"></icon>
					<icon class="app-flash-sale-spike-icon"
						v-if="good.flash_sale_status === 2 || good.flash_sale_status === 0"></icon>
					<view class="app-beginning" v-if="good.flash_sale_status === 1">
						抢购中 还剩
						{{good.flash_sale_string}}
						结束
					</view>
					<view class="app-beginning" v-if="good.flash_sale_status === 2">
						抢购未开始 还剩
						{{good.flash_sale_string}}
						开始
					</view>
					<text class="app-over" v-if="good.flash_sale_status === 0">抢购已结束</text>
				</view>

				<view class="dir-top-nowrap" v-if="good.new_status === 0">
					<view class="reduce-price" v-if="good.reduce_price > 0 && good.new_status === 0">
						比加入时降￥{{good.reduce_price}}
					</view>
					<view class="app-price-button dir-left-nowrap main-between cross-center ">
						<text class="app-price" :class="theme+ '-m-text ' + theme">
							定金￥{{good.attrs.price}}
						</text>
						<view @click.stop>
							<app-add-subtract v-model="mch.goods_list[index].num" :good_id="mch.goods_list[index].id"
								:stock="good.attrs.stock" @change="change" :theme="theme"></app-add-subtract>
						</view>
					</view>
				</view>

				<view class="app-failed-goods" v-else>
					<view v-if="good.new_status === 2" class="app-text dir-left-nowrap main-left cross-center">
						商品已售罄,请联系卖家
					</view>
					<view v-else-if="good.new_status === 3" class="app-text  dir-left-nowrap main-left cross-center">
						商品已失效
					</view>
					<view v-else-if="good.new_status === 4" class="app-text  dir-left-nowrap main-left cross-center">
						商户已关闭
					</view>
					<view v-else-if="good.new_status === 5" class="app-text dir-left-nowrap main-left cross-center">
						商品已下架
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import appRadio from '../../../../components/basic-component/app-radio/app-radio.vue';
	import appAddSubtract from '../app-add-subtract/app-add-subtract.vue';
	import appAttr from '../../../../components/page-component/app-attr/app-attr.vue';

	export default {
		name: "app-shop-product",
		components: {
			appRadio,
			appAddSubtract,
			appAttr
		},
		props: {
			mch: {
				type: Object
			},
			editStatus: {
				type: Boolean,
				default () {
					return false;
				}
			},
			theme: String,
			isemitjump: {
				type: Boolean,
				default () {
					return false;
				}
			},
		},
		data() {
			return {
				timer: null,
				time: '0'
			}
		},
		methods: {
			navigateMch(mch) {
				if (mch.mch_id) {
					uni.navigateTo({
						url: `/plugins/mch/shop/shop?mch_id=${mch.mch_id}`
					});
				}
			},
			changeSingleRadio(mch, item) {
				this.$emit('changeSingleRadio', mch, item);
			},
			changeAllRadio(data) {
				this.$emit('changeRadioAll', data);
			},

			jump(good) {
				if (this.isemitjump) {
					this.$emit('togoods', good)
					return;
				}
				/* if (good.new_status !== 0) return;
				let url = ``;
				if (good.mch_id > 0) {
					url = `/plugins/mch/goods/goods?id=${good.goods.id}&mch_id=${good.mch_id}&mall_id=${good.mall_id}`;
				} else if (good.sign === 'miaosha') {
					url = `/plugins/miaosha/goods/goods?id=${good.goods.id}&mall_id=${good.mall_id}`;
				} else if (good.sign === 'flash-sale') {
					url = `/plugins/flash_sale/goods/goods?id=${good.goods.id}&mall_id=${good.mall_id}`;
				} else {
					url = `/pages/goods/goods?id=${good.goods.id}&mall_id=${good.mall_id}`;
				}
				uni.navigateTo({
					url
				}); */
			},

			change(number, id) {
				this.$emit('change', number, id, this.mch.mch_id);
			}
		},
	}
</script>

<style scoped lang="scss">
	.app-shop-product {
		width: #{750rpx};
		background-color: #ffffff;
		margin-top: #{32rpx};
	}

	.app-mch {
		border-bottom: #{1rpx} solid #e2e2e2;
		height: #{80rpx};
		width: 100%;

		.app-all-radio {
			width: #{94rpx};
			height: #{80rpx};

			.app-all {
				width: #{40rpx};
				height: #{40rpx};
				border-radius: 50%;
				margin-left: #{24rpx};
				background-color: white;
				border: #{2rpx} solid #cccccc;
			}

			.app-all-n {
				background-color: #cdcdcd !important;
			}

			.app-all-active {
				width: #{40rpx};
				height: #{40rpx};
				border-radius: 50%;
				margin-left: #{24rpx};
				background-repeat: repeat;
				background-size: 100% 100%;
				background-image: url("../../../../static/image/icon/yes-radio.png");
			}
		}

		.app-mch-name {
			max-width: 80%;
			font-size: #{26rpx};
			color: #666666;
		}
	}

	.app-product {
		width: 100%;
		margin-top: #{30rpx};
		padding-bottom: #{30rpx};
		border-bottom: #{1rpx} solid #e2e2e2;

		.app-single-radio {
			width: #{84rpx};
			height: #{156rpx};

			.disabled-radio {
				width: #{40rpx};
				height: #{40rpx};
				border-radius: 50%;
				border: #{2rpx} solid #cccccc;
				background-color: #cdcdcd;
			}

			.app-radio {
				width: #{84rpx};
				height: #{156rpx};

				.radio-single {
					width: #{40rpx};
					height: #{40rpx};
					border-radius: 50%;
					background-color: white;
					border: #{2rpx} solid #cccccc;
				}

				.radio-single-active {
					width: #{40rpx};
					height: #{40rpx};
					border-radius: 50%;
					background-repeat: repeat;
					background-size: 100% 100%;
					background-image: url("../../../../static/image/icon/yes-radio.png");
				}
			}

			.app-invalid {
				width: #{64rpx};
				height: #{32rpx};
				line-height: #{32rpx};
				border-radius: #{16rpx};
				text-align: center;
				font-size: #{24rpx};
				color: #FFFFFF;
				background-color: #cdcdcd;
			}
		}

		.app-image {
			width: #{156rpx};
			height: #{156rpx};

			image {
				width: 100%;
				height: 100%;
			}
		}

		.app-content {
			width: #{466rpx};
			background-color: white;
			margin: 0 #{24rpx} #{30rpx} #{20rpx};

			.app-title {
				width: 100%;
				font-size: #{28rpx};
				color: #353535;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				margin-bottom: #{10rpx};
			}

			.app-failed-title {
				color: #999999;
			}

			.app-specification-style {
				margin-bottom: #{16rpx};

				text {
					font-size: #{24rpx};
					color: #999999;
					margin-right: #{36rpx};
				}
			}

			.app-miaosha {
				width: 100%;
				margin-bottom: #{24rpx};

				.app-miaosha-icon {
					width: #{29rpx};
					height: #{29rpx};
					background-repeat: no-repeat;
					background-size: 100% 100%;
					background-image: url("../../../../static/image/cart/miaosha.png");
					margin-right: #{12rpx};
				}

				.app-flash-sale-icon {
					width: #{29rpx};
					height: #{29rpx};
					background-repeat: no-repeat;
					background-size: 100% 100%;
					background-image: url("../../../../static/image/plugins/flash-sale-icon.png");
					margin-right: #{12rpx};
				}

				.app-flash-sale-spike-icon {
					width: #{29rpx};
					height: #{29rpx};
					background-repeat: no-repeat;
					background-size: 100% 100%;
					background-image: url("../../../../static/image/plugins/flash-sale-icon.png");
					margin-right: #{12rpx};
					background-color: #cdcdcd;
				}

				.app-spike-icon {
					width: #{29rpx};
					height: #{29rpx};
					background-repeat: no-repeat;
					background-size: 100% 100%;
					background-image: url("../../../../static/image/cart/spike-invalid.png");
					margin-right: #{12rpx};
				}

				.app-beginning {
					font-size: #{22rpx};
					color: #ff4544;
				}

				.app-over {
					font-size: #{22rpx};
					color: #999999;
				}
			}

			.app-failed-goods {
				width: 100%;

				.app-text {
					color: #353535;
					font-size: #{25rpx};
				}

				.app-spike {
					margin-bottom: #{24rpx};
				}

				.app-spike-icon {
					width: #{29rpx};
					height: #{29rpx};
					background-repeat: no-repeat;
					background-size: 100% 100%;
					background-image: url("../../../../static/image/cart/spike-invalid.png");
					margin-right: #{12rpx};
				}

				.app-spike-text {
					font-size: #{24rpx};
					color: #999999;
				}
			}

			.app-price-button {
				width: 100%;
				height: #{60rpx};

				.app-price {
					font-size: #{32rpx};
				}

				/* .app-price:before {
					content: '￥';
					font-size: #{24rpx};
				} */
			}

			.reduce-price {
				color: #ff4544;
				font-size: #{24rpx};
			}
		}
	}
</style>
